<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
  <title th:text="${file.title}"></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="copyright" content="B3log" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/md.css}">
  <link rel="stylesheet" type="text/css" th:href="@{/css/mdbase.css}">

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <style>
    .hljs-tag, .hljs-name, .hljs-attribute {
      color: #9de0f6 !important;
    }
    .hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr {
      color: #789a5e !important;
    }
    .hljs-keyword, .hljs-selector-tag, .hljs-subst {
      color: #3b9cd4 !important;
    }
    .hljs-string, .hljs-doctag {
      color: #79ca46 !important;
    }
    .hljs-title, .hljs-section, .hljs-selector-id {
      color: #d6d191 !important;
      font-weight: bold;
    }.hljs-type, .hljs-class .hljs-title {
       color: #e0e0e0 !important;
       font-weight: bold;
     }.hljs-type, .hljs-class .hljs-title {
        color: #bc79d2 !important;
        font-weight: bold;
      }
    .vditor-reset pre code {
      color: #fff;
      background-color: #282c34;
    }

    .header {
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.05) 0 1px 7px;
  border-bottom: 1px solid #e1e4e8;
  }

  .wrapper {
  margin: 0 auto;
  max-width: 768px;
  }

  #outline {
  display: none;
  position: fixed;
  width: 250px;
  top: 117px;
  right: 50px;
  bottom: 86px;
  overflow: auto;
  font-size: 14px;
  background-color: #fff;
  line-height: 20px;
  }

  #outline ul {
  margin-left: 16px;
  list-style: none;
  }

  #outline > ul {
  margin-left: 0;
  }

  #outline li > span {
  cursor: pointer;
  border-left: 1px solid transparent;
  display: block;
  padding-left: 8px;
  }

  #outline li > span.vditor-outline__item--current {
  border-left: 1px solid #4285f4;
  color: #4285f4;
  background-color: #f6f8fa;
  }

  #outline li > span:hover {
  color: #4285f4;
  background-color: #f6f8fa;
  }

  @media (max-width: 768px) {
  #outline {
  display: none !important;
  }
  }
  </style>
</head>

<body>
<div class="fn-50"></div>
<div class="wrapper">
  <div id="preview"></div>
</div>
<div id="outline"></div>
<script type="text/javascript" th:src="@{/js/vditor.js}" defer></script>
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script th:inline="javascript">
  $(document).ready(function(){
    console.log('jq初始化完成')
    // 初始化内容
    initRender();
  });
  let url = [[${file.url}]]
  let type = [[${file.fileType}]]
  console.log(url)
  function initRender(){
    //console.log(res.data)
    let markdown = [[${file.content}]]
    console.log(markdown)
    if (type === 'json'){
      markdown = JSON.stringify(markdown)

    }
    if (type === 'm'){
      type = 'matlab'
    }
    if (type === 'h'){
      type = 'c'
    }
    if(type !== 'md'){

      markdown = '> ' +[[${file.title}]] + '\n' + '```'+type+'\n'+markdown+'\n```'
    }

    Vditor.preview(document.getElementById('preview'),
            markdown, {
              speech: {
                enable: true,
              },
              anchor: 1,
              after () {
                if(type !== 'md'){
                  $("code").removeAttr("style");
                }

                if (window.innerWidth <= 768) {
                  return
                }
                const outlineElement = document.getElementById('outline')
                Vditor.outlineRender(document.getElementById('preview'), outlineElement)
                if (outlineElement.innerText.trim() !== '') {
                  outlineElement.style.display = 'block'
                  initOutline()
                }
              },
            })
  }
  const initOutline = () => {
    const headingElements = []
    Array.from(document.getElementById('preview').children).forEach((item) => {
      if (item.tagName.length === 2 && item.tagName !== 'HR' && item.tagName.indexOf('H') === 0) {
        headingElements.push(item)
      }
    })

    let toc = []
    window.addEventListener('scroll', () => {
      const scrollTop = window.scrollY
      toc = []
      headingElements.forEach((item) => {
        toc.push({
          id: item.id,
          offsetTop: item.offsetTop,
        })
      })

      const currentElement = document.querySelector('.vditor-outline__item--current')
      for (let i = 0, iMax = toc.length; i < iMax; i++) {
        if (scrollTop < toc[i].offsetTop - 30) {
          if (currentElement) {
            currentElement.classList.remove('vditor-outline__item--current')
          }
          let index = i > 0 ? i - 1 : 0
          document.querySelector('span[data-target-id="' + toc[index].id + '"]').classList.add('vditor-outline__item--current')
          break
        }
      }
    })
  }
</script>
</body>
</html>